<script setup lang="ts">
import { Icon } from '@iconify/vue'
import { ref } from 'vue'
import { iconifyApi } from '@/apis/common/iconifyApi'

const model = defineModel<string>()
const loading = ref(false)
const options = ref<string[]>()

async function remoteMethod(query: string) {
  if (query && query.length > 0) {
    loading.value = true
    try {
      const { icons } = await iconifyApi.search(query)
      options.value = icons
    }
    finally {
      loading.value = false
    }
  }
}
</script>

<template>
  <el-select
    v-model="model"
    filterable
    remote
    remote-show-suffix
    :remote-method="remoteMethod"
    :loading="loading"
    placeholder="请输入关键字"
    fit-input-width
  >
    <template #label="{ value }">
      <span class="mr-3 w-6 text-active"><Icon :icon="value" :inline="true" /> </span>
      <span class="text-active">{{ value }}</span>
    </template>
    <el-option
      v-for="item in options"
      :key="item"
      :label="item"
      :value="item"
    >
      <span class="mr-3 w-6"><Icon :icon="item" :inline="true" /> </span>
      <span class="text-secondary">{{ item }}</span>
    </el-option>
  </el-select>
</template>
